<template>
	<div class="header">
		<div class="logo">后台管理系统</div>
		<div class="user-info">
			<el-dropdown trigger="click" @command="handleCommand">
				<span class="el-dropdown-link">
                    <img class="user-logo" src="../static/img/img.jpg">
                    {{username}}
                </span>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item command="updatePwd">修改密码</el-dropdown-item>
					<el-dropdown-item command="loginout">退出</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>
		</div>
		<div class="user-org">
			<el-dropdown trigger="click" @command="handleOrg">
				<span class="el-dropdown-link">
                燕园康复医院
                </span>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item command="tkzk001">燕园康复医院</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>
		</div>
	</div>
</template>

<script>
	import cmscommon from '@/utils/cmscommon'
	import interfaces from '@/interfaces'
	import Vue from 'Vue'
	export default {
		data() {
			return {
				name: '张海滨'
			}
		},
		computed: {
			username() {
				let username = sessionStorage.getItem('nickName');
				return username ? username : this.name;
			}
		},
		methods: {
			success(data) {
				console.log(data);
				if(data.data.code == 0) {
					
					sessionStorage.setItem('nickName', data.data.data.nickName);

				} else {
					this.$message({
						message: data.data.code + ":" + data.data.msg,
						type: 'error'
					})
				}
			},
			fail(data) {
				this.$message({
					message: data.response.data.status + ":" +data.response.data.error,
					type: 'error'
				})
			},
			getUserInfo: function() {
				console.log("获取用户信息");
				cmscommon.send({
					method: "GET",
					url: interfaces.getUserInfo.replace("{userCd}", localStorage.getItem('userCd')),
				}).then(this.success).catch(this.fail);

			},
			handleCommand(command) {
				if(command == 'updatePwd') {
					this.$router.push('/updatePassword');
				}
				if(command == 'loginout') {
					localStorage.removeItem('nickName')
					this.$router.push('/login');
				}
			},
			handleOrg(command) {
				localStorage.setItem('orgCd',command)
			}
		},
		created: function() {
			this.getUserInfo()
		}

	}
</script>

<style>
	.header {
		position: relative;
		box-sizing: border-box;
		width: 100%;
		height: 70px;
		font-size: 22px;
		line-height: 70px;
		color: #fff;
	}
	
	.header .logo {
		float: left;
		width: 250px;
		text-align: center;
	}
	.user-org {
		float: right;
		padding-right: 50px;
		font-size: 16px;
		color: #fff;
	}
	.user-org .el-dropdown-link {
		position: relative;
		display: inline-block;
		padding-left: 50px;
		color: #fff;
		cursor: pointer;
		vertical-align: middle;
	}
	.user-info {
		float: right;
		padding-right: 50px;
		font-size: 16px;
		color: #fff;
	}
	
	.user-info .el-dropdown-link {
		position: relative;
		display: inline-block;
		padding-left: 50px;
		color: #fff;
		cursor: pointer;
		vertical-align: middle;
	}
	
	.user-info .user-logo {
		position: absolute;
		left: 0;
		top: 15px;
		width: 40px;
		height: 40px;
		border-radius: 50%;
	}
	
	.el-dropdown-menu__item {
		text-align: center;
	}
</style>